/* 图标通用样式 */

/* 基础图标样式 */
.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: middle;
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
}

/* 图标尺寸 */
.icon-xs {
  width: 12px;
  height: 12px;
}

.icon-sm {
  width: 16px;
  height: 16px;
}

.icon-md {
  width: 24px;
  height: 24px;
}

.icon-lg {
  width: 32px;
  height: 32px;
}

.icon-xl {
  width: 48px;
  height: 48px;
}

/* 工具图标样式 */
.tool-icon {
  width: 20px;
  height: 20px;
  color: #c9d1d9;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 2px;
  border-radius: 4px;
}

.tool-icon:hover {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.1);
  transform: scale(1.05);
}

.tool-icon.active {
  color: #58a6ff;
  background: rgba(88, 166, 255, 0.15);
}

.tool-icon:disabled {
  color: #6e7681;
  cursor: not-allowed;
  opacity: 0.5;
}

/* 状态图标样式 */
.status-icon {
  width: 16px;
  height: 16px;
}

.status-icon.success {
  color: #2ea043;
}

.status-icon.error {
  color: #f85149;
}

.status-icon.warning {
  color: #d29922;
}

.status-icon.info {
  color: #58a6ff;
}

/* 导航图标样式 */
.nav-icon {
  width: 18px;
  height: 18px;
  color: #8b949e;
  cursor: pointer;
  transition: color 0.2s ease;
}

.nav-icon:hover {
  color: #f0f6fc;
}

.nav-icon:disabled {
  color: #484f58;
  cursor: not-allowed;
}

/* 菜单图标样式 */
.menu-icon {
  width: 20px;
  height: 20px;
  color: #c9d1d9;
  cursor: pointer;
  transition: all 0.2s ease;
  padding: 4px;
  border-radius: 4px;
}

.menu-icon:hover {
  color: #f0f6fc;
  background: rgba(240, 246, 252, 0.05);
}

/* 医学图标样式 */
.medical-icon {
  width: 24px;
  height: 24px;
  color: #7c3aed;
}

/* 旋转动画 */
.icon-spin {
  animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 脉冲动画 */
.icon-pulse {
  animation: icon-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes icon-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 主题适配 */
.dark-theme .icon {
  color: #c9d1d9;
}

.light-theme .icon {
  color: #24292f;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .tool-icon {
    width: 18px;
    height: 18px;
    padding: 3px;
  }
  
  .menu-icon {
    width: 18px;
    height: 18px;
    padding: 3px;
  }
  
  .nav-icon {
    width: 16px;
    height: 16px;
  }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
  .tool-icon {
    border: 1px solid currentColor;
  }
  
  .tool-icon:hover {
    background: currentColor;
    color: var(--background-color);
  }
}

/* 减少动画模式 */
@media (prefers-reduced-motion: reduce) {
  .tool-icon,
  .nav-icon,
  .menu-icon {
    transition: none;
  }
  
  .icon-spin,
  .icon-pulse {
    animation: none;
  }
} 